<template>
	<view class="gui-flex gui-rows gui-wrap gui-space-between">
		<view class="gui-product" hover-class="gui-tap" 
		v-for="(item, index) in products" :key="index" 
		@click="gotoInfo(index, item)"
		:style="{
			width  : (375 - margin*2)+'rpx',
			marginLeft  : margin+'rpx',
			marginRight : margin+'rpx'}">
			<view>
				<gui-image :src="item.thumb" :width="(375 - margin*2)" :height="imgHeight"></gui-image>
			</view>
			<view class="gui-product-lines">
				<text class="gui-product-name">{{item.title}}</text>
			</view>
			<view class="gui-product-lines gui-flex gui-rows gui-nowrap gui-align-items-center">
				<text class="gui-color-red gui-text-small">￥</text>
				<text class="gui-h5 gui-color-red">{{item.price}}</text>
				<text class="gui-text-small gui-color-gray gui-line-through gui-price-margin">￥{{item.market_price}}</text>
				<!-- <text class="gui-text-small gui-color-gray gui-price-margin">{{item.selledNum}}人购买</text> -->
			</view>
			<view class="gui-product-lines product-toolbar" v-if="isSelf == 1">
				<text class="gui-icons gui-color-blue" @click.stop="toEdit(item)">&#xe69e; 编辑</text>
				<text class="gui-icons gui-color-blue" @click.stop="handleClickDelete(item)">&#xe684; 删除</text>
			</view>
		</view>
		<gui-empty v-if="products.length === 0" style="width: 100%;"></gui-empty>
	</view>
</template>
<script>
export default{
	name  : "gui-product-list",
	props : {
		products    : {type : Array,  default : function(){return [];}},
		margin      : {type : Number, default : 15},
		imgHeight   : {type : Number, default : 345},
		isSelf : {type:Number}
	},
	watch:{
		isSelf(val){
			console.log(val)
		}
	},
	mounted(){
		
		
	},
	methods:{
		gotoInfo : function (idx, item) {
			this.$emit('gotoInfo', idx, item);
		},
		handleClickDelete(item){
			let self = this;
			uni.showModal({
				title: '提示',
				content:'确认删除吗？',
				success(res) {
					if(res.confirm){
						self.onDelete(item)
					}
					
				}
			})
		},
		//删除
		async onDelete(item) {
			const res = await this.$http.post(`route=plugin.supplier.frontend.goods.del-goods&goods_id=${item.goods_id}`);
			this.$emit('deleteSuccess');
			uni.showToast({
				title: '删除成功!',
				duration: 2000,
				icon: 'none'
			});
		},
		toEdit(item){
			console.log(item)
			uni.navigateTo({
				url: `/pages/release-product/edit?id=${item.goods_id}`
			})
		}
	}
}
</script>
<style scoped>
.gui-product{margin-bottom:38rpx;}
.gui-product-lines{margin-top:10rpx;}
.gui-product-name{font-size:26rpx; line-height:32rpx;
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;					
	-webkit-box-orient: vertical;
}
.gui-price-margin{margin:0 10rpx;}
.product-toolbar{
	height:60rpx;
	line-height:60rpx;
	
}
.product-toolbar text{
		margin-right:20rpx
	}

</style>
